import { Component, Vue } from "vue-property-decorator";
import AppMap from "@/components/common/app-map/index.vue";
import * as Service from "./service";

@Component({
  components: {
    AppMap
  },
})

export default class OpenlayersMap extends Vue {
  textColor = ["#e84118", "#009432", "#000DFF", "#DE4313"];
  locationDescribe: string = "";
  index: number = 1;
  locationObj = {
    locationDescribe: null,
    locationX: null,
    locationY: null,
  };
  handles = {
    button: false,
    search: true,
    serviceCommunication: true,
  };
  // cascadeFlag: boolean = false;

  beforeDestroy() {
    // @ts-ignore
    this.$event.$off('initPoint');
  }

  onMapLoaded(event: any) {
    this.$nextTick(() => {
      this.getGrids();
      this.appMap.startSelectPoint(this, this.getLocation.bind(this));
      // @ts-ignore
      this.$event.$on('initPoint', (data => {
        if (data.value.length === 0) return;
        let point = [{ geometry: { x: data.value[0], y: data.value[1] }, style: { styleType: 2, radius: 5, fillColor: '#ff0000', iconUrl: '/assets/images/location.png' }, attr: data }];
        this.appMap.addPoints(point);
        this.appMap.fitExtent([...data.value, ...data.value]);
      }))
    });
  }

  /** 获取网格空间数据 */
  async getGrids() {
    let data: any[] = await Service.loadGridsById({ humanId: "" });
    if (!data || data.length < 1) {
      return;
    }
    const features: any[] = [];
    data.forEach((d, i) => {
      const feature = {
        type: "Feature",
        geometry: JSON.parse(d.dutyGridGeometry),
        properties: { index: i, text: d.dutyGridName },
      };
      features.push(feature);
    });
    this.addGeoJson(data[data.length - 1].dutyGridId, features);
  }

  addGeoJson(id: any, features: any[]) {
    const vectorLayer = this.appMap.addVectorLayer("layer_" + id);
    this.appMap.addGeoJsonObjectByLayer(vectorLayer, features, null);
    this.appMap.comMap.setLayerStyle((feature: any) => {
      let styleJson: any = {
        stroke: { color: "rgba(241,4,4,1)", lineDash: [4], width: 1 },
        fill: { color: "rgba(245,97,97,0.1)" },
      };
      styleJson["text"] = {
        textAlign: "center",
        textBaseline: "middle",
        font: "12px Microsoft YaHei",
        offsetX: 0,
        offsetY: -15,
        text: feature.getProperties().text,
        fill: { color: this.textColor[feature.getProperties().index % 4] },
        placement: "point",
        overflow: true,
      };
      return this.appMap.comMap.createOLStyle(styleJson);
    }, vectorLayer);
  }

  async getLocation(context: any, evt: any) {
    let extent = [...evt.coordinate, ...evt.coordinate],
      mapLocationType = JSON.parse(sessionStorage.getItem("sysConfigMap") as string).MAP_LOCATION_TYPE;
    this.appMap.fitExtent(extent);
    let data: any = mapLocationType == 1 ? await this.appMap.getPointsFormattedAddress(`${extent[1]},${extent[0]}`)
      : await this.appMap.getInterestPoi(extent[1], extent[0]);
    this.locationDescribe = data.result.formatted_address;
    let params = {
      locationDescribe: data.result.formatted_address,
      locationX: extent[0],
      locationY: extent[1],
    };
    // @ts-ignore
    this.$event.$emit('formMapFormattedAddress', params);
    let point = `POINT(${extent[0]} ${extent[1]})`;
    this.getAreaGridsByPoint(point);
  }

  async getAreaGridsByPoint(point: any) {
    let strideGridReport = sessionStorage.getItem('strideGridReport');
    let areas: any[] = await Service.getAreaGridsByPoint({ point });
    // @ts-ignore
    this.$event.$emit('formMap', areas)
    if (strideGridReport === '1') {
      if (areas.length < 1) {
        // this.qkLocationService.componentMission(false);
        return;
      }
      areas.forEach(async a => {
        if (a.level === 7) {
          let b: any = await Service.getGridReportFlagByDutyGridId({ dutyGridId: +a.dutyGridId })
          // this.qkLocationService.componentMission({type: 1, flag: b});

        }
      });
    }
  }

  get appMap(): any {
    return this.$refs.appMap;
  }
}